<script setup>
  import messageApi from '@/apis/message.js'
  import {onMounted,ref} from 'vue'
  const messageData = ref([])
  const isTriggered = ref(false)
  let page = 1
  onMounted(async()=>{
    let res = await messageApi.list()
    console.log(res);
    messageData.value = res.data.data.items
  })


  // 触底加载更多
  async function onScrollToLower(){
    page++
    let res = await messageApi.list(201,page,10)
    if(res.data.data.items){
      messageData.value.push(...res.data.data.items)
    }
  }
  // 下拉刷新
  async function onScrollViewRefresh(){
    isTriggered.value = true
    page = 1
    let res = await messageApi.list(201,page,10)
    console.log(res);
    messageData.value = res.data.data.items
    isTriggered.value = false
  }

</script>
<template>
  <scroll-view class="scroll-view" scroll-y @scrolltolower="onScrollToLower"
  @refresherrefresh="onScrollViewRefresh" refresher-enabled :refresher-triggered="isTriggered">
  <view class="scroll-view-wrapper">
      <view class="message-action">
        <text class="iconfont icon-clear"></text>
        全部已读
      </view>
      <uni-card :border="false" :is-shadow="false" v-for="item in messageData" :key="item.id">
        <view class="brief">{{item.content}}</view>
        <view class="extra">
          <text class="time">{{item.created}}</text>
          <navigator
            hover-class="none"
            class="link"
            url="/subpkg_message/content/index"
            >查看详情</navigator
          >
        </view>
        <template v-slot:title>
          <view class="title unread">{{item.title}}</view>
        </template>
      </uni-card>

      <view v-if="false" class="message-blank">暂无消息</view>
    </view>
  </scroll-view>
</template>

<style lang="scss" scoped>
  @import './styles.scss';
</style>
